<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p class="font">用户登录</p>
    </header>
    <!-- 表单部分 -->
    <ul class="form-box">
      <li class="phone">
        <!-- <div class="title">
          手机号码:
        </div> -->
        <div class="content">
          <input type="text" v-model="userId" placeholder="请输入11位手机号码">
        </div>
      </li>
      <li class="password">
        <!-- <div class="title">
          密码:
        </div> -->
        <div class="content psw">
          <input type="password" v-model="password" placeholder="请输入密码" ref="password">
          <i class="fa fa-eye-slash" @click="hide" ref="eye"></i>
          <button @click="toForget">忘记密码？</button>
        </div>
      </li>
      <li class="vertify">
        <!-- <div class="title">
          手机号码:
        </div> -->
        <div class="content">
          <input type="text" v-model="vertifyCode" placeholder="请输入验证码">
        </div>
      </li>
      <li class="button">
        <div class="button-get">
          <button @click="getCode" :disabled="isButtonDisabled" ref="mybutton">获取验证码</button>
        </div>
      </li>
    </ul>
    <div class="button-login">
      <button @click="login">登录</button>
    </div>
    <div class="button-regist">
      <button @click="register">去注册</button>
    </div>
    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../components/Footer.vue';

export default {
  name: 'Login',
  data() {
    return {
      userId: '',
      password: '',
      vertifyCode: '',
      isButtonDisabled: false,
    }
  },
  methods: {
    login() {
      if (this.userId == '') {
        alert('手机号码不能为空！');
        return;
      }
      if (this.password == '') {
        alert('密码不能为空！');
        return;
      }

      //验证码匹配
      const storedRandomNumber = localStorage.getItem('randomNumber');
      const Number = parseInt(storedRandomNumber);
      if (this.vertifyCode === '') {
        alert('验证码不能为空！');
        return;
      }
      if (this.vertifyCode !== storedRandomNumber) {
        alert('验证码错误！');
        return;
      }

      //登录请求
      this.$axios.get('users/login', {
        params: {
          userId: this.userId,
          password: this.password
        }
      }).then(response => {
        console.log(response);
        let token = response.data;
        if (token == null) {
          alert('用户名或密码不正确！');
        } else {
          this.$setSessionStorage('token', token);
          //sessionstorage有容量限制，为了防止数据溢出，所以不将userImg数据放入session中
          this.$axios.get('users', {
            params: {
              userId: this.userId,
              password: this.password,
              token: this.$getSessionStorage('token'),
            }
          }).then(response => {
            console.log(response);
            let user = response.data;
            user.userImg = '';
            this.$setSessionStorage('user', user);
            alert("登录成功");
            this.$setSessionStorage("empty", 0);
            localStorage.setItem('couponList', 0)
            this.$router.push('/person');
          }).catch(error => {
            console.error(error);
          });
        }
      }).catch(error => {
        console.error(error);
      });
    },
    register() {
      this.$router.push({ path: '/register' });
    },
    getCode() {
      let btn = this.$refs.mybutton;
      btn.style.backgroundColor = '#666';
      const vm = this;
      vm.isButtonDisabled = true; // 禁用按钮
      let num = 10;

      //随机生成一个四位数
      const randomNumber = Math.floor(1000 + Math.random() * 9000);
      localStorage.setItem('randomNumber', randomNumber.toString());
      alert(`验证码为:${randomNumber}`);

      btn.innerHTML = `${num}秒后重新获取`
      let timer = setInterval(function () {
        num--
        btn.innerHTML = `${num}秒后重新获取`
        if (num === 0) {
          vm.isButtonDisabled = false; // 5秒后重新启用按钮
          btn.style.backgroundColor = '#38CA73';
          btn.innerHTML = '获取验证码';
          localStorage.setItem('randomNumber', '');
          clearInterval(timer);
        }
      }, 1000)
      // setTimeout(() => {
      //   this.isButtonDisabled = false; // 5秒后重新启用按钮
      //   btn.style.backgroundColor = '#38CA73'
      //   btn.innerHTML = "获取验证码"
      // }, 5000);
    },
    toForget() {
      this.$router.push('/forget')
    },
    hide() {
      if (this.$refs.password.type === 'password') {
        this.$refs.password.type = 'text'
        this.$refs.eye.className = 'fa fa-eye'
      } else {
        this.$refs.password.type = 'password'
        this.$refs.eye.className = 'fa fa-eye-slash'
      }

    }
  },
  components: {
    Footer
  }
}
</script>

<style scoped>
/*********** 总容器 ***********/
.wrapper {
  width: 100%;
  height: 100%;
}

/*********** header部分 ***********/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  /* 提高层次 */
  z-index: 1000;

  display: flex;
  justify-content: space-around;
  align-items: center;
}

/*********** 表单部分 ***********/
.wrapper .form-box {
  width: 100%;
  margin-top: 15vw;
}

.wrapper .form-box li {
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
  margin-top: 2vw;

  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .form-box li .button-get {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .button-get button {

  font-size: 16px;
  padding: 3.5vw 15vw;
  background-color: #38CA73;
  border-radius: 25px;
  border: none;
  color: #fff;
}

.wrapper .form-box li .psw {
  position: relative;
}

.wrapper .form-box li .psw button {
  position: absolute;
  top: 4vw;
  right: 2vw;
  z-index: 1;

  border: none;
  background-color: #fff;
  color: #0097ff;
}

.wrapper .form-box li .psw i {
  position: absolute;
  top: 4.5vw;
  right: 22vw;
  z-index: 1;
}

.wrapper .form-box li .content input {
  font-size: 3.5vw;
  padding: 4.5vw 15vw;
  border-radius: 20px;
  border: 0.5px solid #999;
}

.wrapper .button-login {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .button-login button {
  margin-top: 10vw;
  font-size: 16px;
  padding: 3.5vw 30vw;
  background-color: #0097ff;
  border-radius: 25px;
  border: none;
  color: #fff;
}

.wrapper .button-regist {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .button-regist button {
  margin-top: 5vw;
  font-size: 16px;
  padding: 3.5vw 28.3vw;
  background-color: #aaa;
  border-radius: 25px;
  border: none;
  color: #444;
}

/*********** 底部菜单部分 ***********/
</style>